<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="75px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="时间类型" prop="typeTime">
                            <el-select v-model="query.typeTime" placeholder="请输入" style="width:100%">
                                <el-option label="按天查询" value="0"></el-option>
                                <el-option label="按月查询" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="query.typeTime=='1'?'按月份':'按天查询'" prop="timeDate">
                            <el-date-picker
                                v-model="query.timeDate"
                                :editable='false'
                                :clearable='false'
                                :type="query.typeTime=='1'?'month':'date'"
                                style="width:100%"
                                placeholder="请选择">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <el-button @click="btnExp">导出</el-button>
            </div>
            <el-table :data="tableData" v-loading="loading" style="width: 100%" @expand='expandChange'>
                <el-table-column type="expand" prop="children">
                    <template scope="scope">
                        <child-table :scope="scope" :childData='childData'></child-table>
                    </template>
                </el-table-column>
                <el-table-column label="负责人" width="180">
                    <template scope="scope">
                        <span>{{scope.row.orgUserName  | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="订单总量（条）">
                    <template scope="scope">
                        <span>{{scope.row.totalNum  | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="总销售额（元）">
                    <template scope="scope">
                        <span>{{Number(scope.row.totalMoney).toFixed(2)  | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="经销商分成总额（元）">
                    <template scope="scope">
                        <span>{{Number(scope.row.dividedMoney).toFixed(2)  | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="e学云后台分成总额（元）">
                    <template scope="scope">
                        <span>{{Number(scope.row.orgMoney).toFixed(2)  | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import moment from 'moment';
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import childTable from './comps/childTable';
import { pageAgentStatistics } from 'api/serviceManage';
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
    name: 'orderStatistics',
    components: { Levelbar, TableLayout, province, city, region, childTable },
    data() {
        return {
            childData: {
                dateType: '',
                date: ''
            },
            loading: true,
            tableData: [],
            pageQuery: {
                currentpage: 1,
                total: 0
            },
            query: {
                provinceId: '',
                cityId: '',
                areaId: '',
                typeTime: '1',
                timeDate: new Date()
            }
        };
    },
    created() {
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['token'])
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },
        onSubmit() {
            this.pageQuery.currentpage = 1;
            this.queryData();
        },
        queryData() {
            let provinceId = this.query.provinceId; // 省id
            let cityId = this.query.cityId; // 市id
            let areaId = this.query.areaId; // 区id
            let dateType = this.query.typeTime; // 0：选择天查询  1：选择月查询
            let date = null;
            if (dateType == '0') {
                date =
          this.query.timeDate == ''
            ? ''
            : moment(this.query.timeDate).format('YYYY-MM-DD');
            } else {
                date =
          this.query.timeDate == ''
            ? ''
            : moment(this.query.timeDate).format('YYYY-MM');
            }
      // let date = this.query.timeDate==''?'':moment(this.query.timeDate).format('YYYY-MM'); // 查询日期或查询的月份，如2017-10-31或2017-10

            pageAgentStatistics(
        this.pageQuery.currentpage,
        this.config.pageSize,
        provinceId,
        cityId,
        areaId,
        dateType,
        date
      )
        .then(res => {
            this.loading = false;
            this.tableData = res.data.content.list;
            this.pageQuery.total = res.data.content.pagination.total;
        })
        .catch(() => {
            this.loading = false;
        });
        },
        expandChange(row, expandedRows) {
            if (expandedRows) {
                this.childData.dateType = this.query.typeTime;

                if (this.childData.dateType == '0') {
                    this.childData.date =
            this.query.timeDate == ''
              ? ''
              : moment(this.query.timeDate).format('YYYY-MM-DD');
                } else {
                    this.childData.date =
            this.query.timeDate == ''
              ? ''
              : moment(this.query.timeDate).format('YYYY-MM');
                }
        // this.childData.date = this.query.timeDate==''?'':moment(this.query.timeDate).format('YYYY-MM');
            }
        },
        btnExp() {
            let provinceId = this.query.provinceId; // 省id
            let cityId = this.query.cityId; // 市id
            let areaId = this.query.areaId; // 区id
            let dateType = this.query.typeTime; // 0：选择天查询  1：选择月查询
            let date = null;
            if (dateType == '0') {
                date =
          this.query.timeDate == ''
            ? ''
            : moment(this.query.timeDate).format('YYYY-MM-DD');
            } else {
                date =
          this.query.timeDate == ''
            ? ''
            : moment(this.query.timeDate).format('YYYY-MM');
            }
            console.log(dateType)
            if (this.pageQuery.total !== 0) {
        // ${LOCAL_API.ly}
                window.location.href = `${LOCAL_API.ly}/payIncrementDetail/exportAgentStatistics?page=${
          this.pageQuery.currentpage
        }&rows=${
          this.config.pageSize
        }&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&dateType=${dateType}&date=${date}&token=${this.token}`;
            } else {
                this.$message('目前没有数据哦~~');
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  .app-levelbar {
    height: 35px;
  }
}
</style>

